<template>
  <div>
    <top-list :activeIndex="0+''"></top-list>
    <el-container>
<!--      <el-header style="margin-bottom: 20px">-->
<!--      </el-header>-->
      <el-container>
        <el-aside width="350rem">
          <div>
            <h4 style="margin-left: 90rem;margin-bottom: 10rem">课题信息</h4>
            <el-form ref="form" :model="form" label-width="120rem">
              <el-form-item label="课题名称" >
                <el-input v-model="form.researchName"></el-input>
              </el-form-item>
              <el-form-item label="课题简称">
                <el-input v-model="form.researchSimpleName"></el-input>
              </el-form-item>
              <el-form-item label="课题PI">
                <el-input v-model="form.piName"></el-input>
              </el-form-item>
              <el-form-item label="课题编码">
                <el-input v-model="form.subjectCode"></el-input>
              </el-form-item>
              <el-form-item label="访视阶段" v-model="unmean">
                <el-select  placeholder="点击查看">
                  <el-option v-for="item in form.vpInfo" :label=processvpinfo(item) :key="item.code" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="采样率">
                <el-input v-model="form.sampleRate" v-if="form.sampleRate"></el-input>
                <el-tag v-else  type="danger">未填写</el-tag>
              </el-form-item>
              <el-form-item label="实验规范">
                <el-tag v-if="form.experimentSpecification">已上传</el-tag>
                <el-tag v-else  type="danger">未上传</el-tag>
              </el-form-item>
            </el-form>
          </div>
          <div :v-show="false">
            <h4 style="margin-left: 90rem;margin-bottom: 10rem">中心信息</h4>
            <el-form ref="form" :model="siteInfo" label-width="120rem">
              <el-form-item label="中心名称">
                <el-input v-model="siteInfo.siteName"></el-input>
              </el-form-item>
<!--              <el-form-item label="中心负责人">-->
<!--                <el-input v-model="siteInfo.siteHeader"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="机构名称">
                <el-input v-model="siteInfo.agencyName"></el-input>
              </el-form-item>
              <el-form-item label="负责人邮箱">
                <el-input v-model="siteInfo.personEmail"></el-input>
              </el-form-item>
<!--              <el-form-item label="机构等级">-->
<!--                <el-input v-model="siteInfo.agencyLevel"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="机构位置">-->
<!--                <el-input v-model="siteInfo.agencyCity"></el-input>-->
<!--              </el-form-item>-->
            </el-form>

          </div>
        </el-aside>
        <el-main>
          <div>
            <div id="year_pie" style="width: 30%;height: 300rem;float:left"></div>
            <div id="quality_pie" style="width: 30%;height: 300rem;float:left"></div>
            <div id="cooperate_pie" style="width: 30%;height: 300rem;float:left"></div>
          </div>
          <div>
            <div id="QA_stacked" style="width: 45%;height:330rem;float:left;margin-bottom: 20rem"></div>
            <div id="year_stacked" style="width: 45%;height:330rem;float:left;margin-bottom: 20rem"></div>
          </div>
          <div>
<!--            set_stacked-->
            <div id="set_stacked" style="width: 90%;height:330rem;float:left;"></div>
<!--            <div id="collect_bar" style="width: 45%;height:300px;float:left"></div>-->
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import site from '@/api/site';
import research from '@/api/research'
import myUtils from '../../api/myUtils'
import TopList from '@/components/TopList'
export default {
  components:{
    TopList
  },
  data() {
    return {
      form: {
        researchName:null
      },
      siteInfo:{
        siteName:null,
        agencyName:null,
        personEmail:null
      },
      activeIndex:'1',
      statData:{},
      color: ['#7aa0a6','#4f8db4','#1c70a4','green','cyan'],
      unmean: ''
    }
  },
  created()
  {
    console.log("oooo")
    console.log(this.$store.getters.roles)
    // if(this.$route.query.paraStr)
    console.log(this.form)
    this.getsite();
    this.getform();
    //this.getStat();
    console.log(this.form)
    let width = document.body.clientWidth;
    // console.log(width)
    let fontsize = (width / 2203)
    document.documentElement.style.fontSize = fontsize + "px"
  },
  mounted()
  {
    this.getStat();
    // console.log("=====================")
    // console.log(this.form)
  },
  methods: {
    getStat()
    {
      let role = myUtils.getRole(this.$route.query.subjectPkId,this.$store.getters.roles,this.$store.getters.isSystemAdministrator);
      if(role==1||role==4||role==5)
      {
        research.getSiteStat(this.$route.query.subjectPkId,myUtils.getSite(this.$route.query.subjectPkId,this.$store.getters.roles)).then(
          response=>{
            this.statData = response.data;
            //console.log(this.statData)

            this.sex_pie_init();
            this.quality_pie_init();
            this.cooperate_pie_init();
            // this.collect_bar_init();
            this.QA_stacked_init();
            this.year_stacked_init();
            this.set_stacked_init();
          }
        )
      }

      //this.$store.getters.roles
      else
      {
        research.getResearchStat(this.$route.query.subjectPkId).then(
          response=>{
            this.statData = response.data;
            //console.log(this.statData)

            this.sex_pie_init();
            this.quality_pie_init();
            this.cooperate_pie_init();
            // this.collect_bar_init();
            this.QA_stacked_init();
            this.year_stacked_init();
            this.set_stacked_init();
          }
        )
      }
    },

    collect_bar_init()
    {
      var chartDom = document.getElementById('collect_bar');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '采集情况',
          textStyle:{
            fontSize: "20rem"
          }
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
          name:'日期',
          nameTextStyle:{
            fontSize: "20rem"
          },
        },
        grid: {
          left: '3%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          name:'数量',
          nameTextStyle:{
            fontSize: "20rem"
          },
        },
        color: this.color,
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);

    },
    QA_stacked_init()
    {
      var chartDom = document.getElementById('QA_stacked');
      var myChart = echarts.init(chartDom);
      var option;

      var x_data = [];
      var y_data = [];
      //console.log(Object.values(this.statData.yearBar))

      try{
        for(let key in this.statData.qabar)
        {
          if(key === -1)
          {
            x_data.push("未包含QA文件");
          }
          else{
            x_data.push(key);
          }
          y_data.push(this.statData.qabar[key])

        }

      }catch (e) {
        console.log(e)
      }

      option = {
        title: {
          text: 'QA分布',
          textStyle:{
            fontSize: "20rem"
          },
          left: '5%'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '3%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x_data,
          name:'QA值',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        yAxis: {
          type: 'value',
          name:'数量',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        color: this.color,
        series: [
          {
            data: y_data,
            type: 'bar'
          }
        ],
        label:{
          textStyle:{
            fontSize:"15rem"
          }
        }
      };

      myChart.setOption(option);


    },
    year_stacked_init()
    {
      var x_data = [];
      var y_data = [];
      //console.log(Object.values(this.statData.yearBar))

      try{
        for(let key in this.statData.yearBar)
        {
          x_data.unshift(key);
          y_data.unshift(this.statData.yearBar[key])

        }

      }catch (e) {
        console.log(e)
      }

      var chartDom = document.getElementById('year_stacked');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '年龄分布',
          textStyle:{
            fontSize: "20rem"
          },
          left: '5%'
        },
        grid: {
          left: '5%',
          right: '20%',
          bottom: '3%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x_data,
          name:'年龄',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        yAxis: {
          type: 'value',
          name:'数量',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        color: this.color,
        series: [
          {
            data: y_data,
            type: 'bar'
          }
        ],
        label:{
          textStyle:{
            fontSize:"15rem"
          }
        }
      };

    myChart.setOption(option);

    },
    set_stacked_init()
    {
      let role =myUtils.getRole(this.$route.query.subjectPkId,this.$store.getters.roles,this.$store.getters.isSystemAdministrator);
      if(role==1||role==4||role==5)
      {
        var chartDom = document.getElementById('set_stacked');
        var myChart = echarts.init(chartDom);
        var option;

        //console.log(Object.values(this.statData.yearBar))
        //var seriesData = [];
        var x_data = [];
        var y_data = [];
        let seriesData = []

        try{
          for(let key in this.statData.collectionBar)
          {
            // var item = {
            //   type: 'line',
            //   name:'key',
            //   data: this.statData.collectionBar[key]
            //
            // }
            // seriesData.push(item)
            let item = []
            item.push(key);
            item.push(this.statData.collectionBar[key])
            seriesData.push(item)

          }

        }catch (e) {
          console.log(e)

        }

        option = {
          title: {
            text: '中心完成情况',
            textStyle:{
              fontSize: "20rem"
            },
            left: '3%',
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            //data: ['中心1', '中心2', '中心3', '中心4']
            //data: ['中心1']
            top:'10%'
          },
          grid: {
            left: '3%',
            right: '7%',
            bottom: '3%',
            top: '25%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
        xAxis: {
          type: 'time',
            boundaryGap: false,
            name:'日期',
            nameTextStyle:{
              fontSize: "15rem"
            },
            axisLabel: {
              textStyle:{
                fontSize: "15rem"
              }
            }
        },
        yAxis: {
          type: 'value',
            name:'数量',
          nameTextStyle:{
            fontSize: "15rem"
          },
          axisLabel: {
            textStyle:{
              fontSize: "15rem"
            }
          }
        },
        color: this.color,
        series: [
          {
            // name: '中心1',
            type: 'line',

            data: seriesData
          },
        // {
        //   name: '中心2',
        //   type: 'line',
        //   stack: 'Total',
        //   data: [220, 182, 191, 234, 290, 330, 310]
        // },
        // {
        //   name: '中心3',
        //   type: 'line',
        //   stack: 'Total',
        //   data: [150, 232, 201, 154, 190, 330, 410]
        // },
        // {
        //   name: '中心4',
        //   type: 'line',
        //   stack: 'Total',
        //   data: [320, 332, 301, 334, 390, 330, 320]
        // },
      ]
      };

      option && myChart.setOption(option);
      } else {

        var chartDom = document.getElementById('set_stacked');
        var myChart = echarts.init(chartDom);
        var option;

        var seriesData = [];
        var legendData = [];
        try {
          for (let key in this.statData.collectionBar) {

            var item = {
              type: 'line',
              name: key,
              data: []

            }
            for( let key1 in this.statData.collectionBar[key])
            {
              var item1 = [];
              item1.push(key1)
              item1.push(this.statData.collectionBar[key][key1])
              item.data.push(item1)
            }
            seriesData.push(item)
            legendData.push(key)
          }
          // console.log("============")
          // console.log(seriesData)

        } catch (e) {
          console.log(e)

        }
        // console.log("+====++++")
        // console.log(seriesData)
        // console.log(legendData)

        option = {
          title: {
            text: '中心完成情况',
            textStyle:{
              fontSize: "20rem"
            },
            left: '3%',
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
           data:legendData,
            textStyle:{
              fontSize: "15rem"
            },
            top: '10%'
            //data: ['中心1']
          },
          grid: {
            left: '3%',
            right: '7%',
            bottom: '3%',
            top: '25%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'time',
            nameTextStyle:{
              fontSize: "15rem"
            },
            axisLabel: {
              textStyle:{
                fontSize: "15rem"
              }
            }

          },
          yAxis: {
            type: 'value',
            name: '数量',
            nameTextStyle:{
              fontSize: "15rem"
            },
            axisLabel: {
              textStyle:{
                fontSize: "15rem"
              }
            }
          },
          color: this.color,
          series: seriesData
        };

        option && myChart.setOption(option);
      }

    },

    cooperate_pie_init()
    {
      var chartDom = document.getElementById('cooperate_pie');
      var myChart = echarts.init(chartDom);
      var data =  [
      { value: 0, name: '高' },
      { value: 0, name: '中' },
      { value: 0, name: '低' },
    ]
      try {
        data[0].value = this.statData.complianceRate.高
        data[1].value = this.statData.complianceRate.中
        data[2].value = this.statData.complianceRate.低
      }catch (e) {
        data =  [
          { value: 0, name: '高' },
          { value: 0, name: '中' },
          { value: 0, name: '低' },
        ]
      }

      var option = {
        title: {
          text: '受试者配合程度分布',
          left: 'center',
          textStyle:{
            fontSize: "20rem"
          },
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '13%',
          textStyle:{
            fontSize: "15rem"
          }
        },
        color: this.color,
        series: [
          {
            name: '受试者配合程度',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              textStyle:{
                fontSize:"15rem"
              }
            }
          }
        ]
      };

      myChart.setOption(option);


    },
    sex_pie_init()
    {

      var chartDom = document.getElementById('year_pie');
      var myChart = echarts.init(chartDom);

      var data =  [
        { value: 0, name: '男' },
        { value: 0, name: '女' },
      ]
      try {
        data[0].value = this.statData.sexRate.男
        data[1].value = this.statData.sexRate.女
      }catch (e) {
        data =  [
          { value: 0, name: '男' },
          { value: 0, name: '女' },
        ]
      }






      var option = {
        title: {
          text: '性别分布',
          left: 'center',
          textStyle:{
            fontSize: "20rem"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '13%',
          textStyle:{
            fontSize: "15rem"
          }
        },
        color: this.color,
        series: [
          {
            name: '性别',
            type: 'pie',
            radius: '50%',
            data:data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              textStyle:{
                fontSize:"15rem"
              }
            }
          }
        ]
      };

      myChart.setOption(option);


    },
    quality_pie_init()
    {

      var chartDom = document.getElementById('quality_pie');
      var myChart = echarts.init(chartDom);

      var data =  [
        { value: 0, name: '高' },
        { value: 0, name: '中' },
        { value: 0, name: '低' },
      ]
      try {
        data[0].value = this.statData.qualityRate.高
        data[1].value = this.statData.qualityRate.中
        data[2].value = this.statData.qualityRate.低
      }catch (e) {
        data =  [
          { value: 0, name: '高' },
          { value: 0, name: '中' },
          { value: 0, name: '低' },
        ]
      }


      var option = {
        title: {
          text: '主观质量评估分布',
          left: 'center',
          textStyle:{
            fontSize: "20rem"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '13%',
          textStyle:{
            fontSize: "15rem"
          }
        },
        color: this.color,
        series: [
          {
            name: '主观质量评估',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label:{
              textStyle:{
                fontSize:"15rem"
              }
            }
          }
        ]
      };

      myChart.setOption(option);


    },

    onSubmit() {
      // console.log('submit!');
    },

    processvpinfo(item)
    {
      return item.code+" "+item.name;

    },

    getform()
    {
      // this.form={
      //   RESEARCH_NAME:'AD研究',
      //   RESEARCH_SIMPLE_NAME:'AD研究',
      //   PI_NAME:'王大',
      //   RESEARCH_CODE:'001',
      //   VP_CODE:'v1',
      //   srate:'500HZ',
      //
      // }

      research.getBysubjectPkId(this.$route.query.subjectPkId).then((response) => {

        const data = response.data;

        console.log("-----------")
        console.log(data)
        this.form.experimentSpecification = data.experimentSpecification;
        this.form.id = data.id;
        this.form.piName = data.piName;
        this.form.platformId = data.platformId;
        this.form.subjectPkId = data.subjectPkId;
        this.form.subjectCode = data.subjectCode;
        this.form.researchName = data.researchName;
        this.form.researchSimpleName = data.researchSimpleName;
        this.form.sampleRate = data.sampleRate;
        this.form.sitePkId = data.sitePkId;
        this.form.siteJoinnum = data.siteJoinnum;
        this.form.vpInfo = eval(data.vpInfo);
      })
    },

    getsite()
    {
      //getSiteBysitePkId("001")
      // console.log("bbbbb")
      let role = myUtils.getRole(this.$route.query.subjectPkId,this.$store.getters.roles,this.$store.getters.isSystemAdministrator)
        // if(role==1||role==3||role==4||role==5||role==6||role==7)
        {
          // console.log(this.$store.getters.roles)
          // console.log(this.$route.query.subjectPkId)
          site.getSiteBysitePkId(myUtils.getSite(this.$route.query.subjectPkId,this.$store.getters.roles)).then((response) => {
            const data = response.data
            console.log(data)
            if(data != null){
              this.siteInfo = data;
            }
          })
        }
    }

  }
}
</script>
<style>
.el-aside{
  font-size: 20rem;
}
.el-form-item__label{
  font-size: 15rem;
}
.el-input__inner {
  height: 40rem;
}
</style>
